<template>
	<div class="user-info-mask" @click="$emit('close')">
		<div class="user-info" :style="{left: pos.x+'px',top: pos.y+'px'}" @click.stop>
			<div class="user-info-box">
				<div class="avatar">
					<head-image :name="user.nickName" :url="user.headImageThumb" :size="60" :online="user.online"
						@click.native="showFullImage()"> </head-image>
				</div>
				<div>
					<el-descriptions :column="1"  class="user-info-items">
						<el-descriptions-item label="用户姓名">{{ user.nickName }}
						</el-descriptions-item>
						<el-descriptions-item label="所属组织">
                            <el-tooltip class="item" effect="dark" placement="top-start">
                                <div slot="content">{{ user.deptName }}</div>
                                <div class="ellipsis">{{ user.deptName }}</div>
                            </el-tooltip>
						</el-descriptions-item>
					</el-descriptions>
				</div>

			</div>
			<el-divider content-position="center"></el-divider>
			<div class="user-btn-group">
                <el-button v-show="adminSet" type="primary" @click="addManager()">设置管理员</el-button>
                <el-button v-show="cancleAdmin" type="primary" @click="cancelManager()">取消管理员</el-button>
                <!--<el-button v-show="isFriend" type="primary" @click="onSendMessage()">发消息</el-button>-->
				<!--<el-button v-show="!isFriend" type="primary" @click="onAddFriend()">加为好友</el-button>-->
			</div>
		</div>
	</div>
</template>

<script>
	import HeadImage from './HeadImage.vue'

	export default {
		name: "userInfo",
		components: {
			HeadImage
		},
		data() {
			return {

			}
		},
		props: {
			user: {
				type: Object
			},
			pos: {
				type: Object
			},
            adminSet: {
                type: Boolean
            },
            cancleAdmin: {
                type: Boolean
            }
		},
		methods: {
		    //设置为群管理员
            addManager() {
                //获取群组id
                let activeGroupId = this.groupStore.activeGroup.id;
                //alert("activegroupid:"+activeGroupId);

                let inviteVO = {
                    groupId: activeGroupId,
                    userId: this.user.id
                }
                if (inviteVO.userId != "" && inviteVO.userId != undefined && inviteVO.userId != null) {
                    this.$http({
                        url: "/group/add/manager",
                        method: 'post',
                        data: inviteVO
                    }).then(() => {
                        this.$message.success("设置成功");
                        this.$emit("reload");
                        this.$emit("close");
                        //刷新群成员的状态
                        let groupFlush = this.$store.state.uiStore.flushGroup.toFlush;
                        this.$store.commit("setFlushGroup",!groupFlush);
                    })
                }else {
                    this.$message.success("设置失败");
                    this.$emit("reload");
                    this.$emit("close");
                }
            },
            //取消群管理员
            cancelManager() {
                this.$confirm(`确定将取消${this.user.nickName}的管理员吗？`, '确认取消管理员?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //获取群组id
                    let activeGroupId = this.groupStore.activeGroup.id;
                    console.log("activeGroup:"+activeGroupId+"=="+"userId:"+this.user.id)
                    this.$http({
                        url: `/group/del/manager/${activeGroupId}`,
                        method: 'delete',
                        params: {
                            userId: this.user.id
                        }
                    }).then(() => {
                        this.$message.success(`已将${this.user.nickName}取消管理员`);
                        this.$emit("reload");
                        this.$emit("close");
                        //刷新群成员的状态
                        let groupFlush = this.$store.state.uiStore.flushGroup.toFlush;
                        this.$store.commit("setFlushGroup",!groupFlush);
                    });
                })
            },
			onSendMessage() {
				let user = this.user;
				let chat = {
					type: 'PRIVATE',
					targetId: user.id,
					showName: user.nickName,
					headImage: user.headImage,
				};
				this.$store.commit("openChat", chat);
				this.$store.commit("activeChat", 0);
				if (this.$route.path != "/home/chat") {
					this.$router.push("/home/chat");
				}
				this.$emit("close");
			},
			onAddFriend() {
				this.$http({
					url: "/friend/add",
					method: "post",
					params: {
						friendId: this.user.id
					}
				}).then((data) => {
					this.$message.success("添加成功，对方已成为您的好友");
					let friend = {
						id: this.user.id,
						nickName: this.user.nickName,
						headImage: this.user.headImageThumb,
						online: this.user.online
					}
					this.$store.commit("addFriend", friend);
				})
			},
			showFullImage() {
				if (this.user.headImage) {
					this.$store.commit("showFullImageBox", this.user.headImage);
				}
			}
		},
		computed: {
			isFriend() {
				let friends = this.$store.state.friendStore.friends;
				let friend = friends.find((f) => f.id == this.user.id);
				return friend != undefined;
			},
            groupStore() {
                return this.$store.state.groupStore;
            },
		}
	}
</script>

<style lang="scss">
  .item {
    height: 25px;
    display: flex;
    position: relative;
    padding-left: 0px;
    align-items: center;
    padding-right: 25px;
  }
   .ellipsis {
     width: 200px; /* 定义一个合适的宽度 */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
	.user-info-mask {
		background-color: rgba($color: #000000, $alpha: 0);
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.user-info {
		position: absolute;
		width: 320px;
		background-color: white;
		border: #dddddd solid 1px;
		border-radius: 5px;
		padding: 15px;

		.user-info-box {
			display: flex;

			.user-info-items {
				margin-left: 10px;
				white-space: nowrap;
				overflow: hidden;

				.el-descriptions__header {
					margin-bottom: 5px;
				}

				.el-descriptions__title {
					font-size: 20px;
				}

				.el-descriptions-item__cell {
					padding-bottom: 1px;
				}
			}
		}

		.user-btn-group {
			text-align: center;
		}
	}
</style>
